<!--支部党员学习统计-->
<template>
  <div id="study" class="mui-slider-item mui-control-content mui-active">
    <div class="time-line flex-center time-fixed">
      <div class="message-line"></div>
      <div @click="showTimePicker()" id="recordYyear" class="year-btn flex-center">
        <span id="recordTimes">{{year}}年</span>
        <img class="arrow_icon" src="../../../../static/images/select_down.png">
      </div>
      <div class="message-line"></div>
    </div>
    <div id="scroll1" class="mui-scroll-wrapper" style="top: 74px;">
      <div class="mui-scroll record-member-lists">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="go(item)" v-for="item in list">
            <div class="mine-lists-content flex-between-center">
              <div class="statistics-lists">
                <h2 class="organization-lists-title">{{item.title}}</h2>
                <div class="organization-lists-time"><span>月度学习计划次数：<b>{{item.shoudStudyNumber}}</b>次，已开展学习次数：<b>{{item.readyStudyNumber}}</b>次</span></div>
              </div>
              <div class="flex-center">
                <p>{{Math.ceil(item.readyStudyNumber/item.shoudStudyNumber*100)}}%</p>
                <span class="mui-icon mui-icon-arrowright"></span>
              </div>
            </div>
          </li>
        </ul>

        <noData v-if="list.length<1 && !isLoading"></noData>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import moment from 'moment'
  import loginService from '@/service/loginService'
  export default {
    name: 'statisticsStudyComponent',
    data () {
      return {
        fn: tools,
        isLoading: true,
        list: [],
        data: {},
        year: '',
        _time: ''
      }
    },
    created () {
      this.year = moment(this.$store.state._time).format('YYYY') || moment().format('YYYY')
      this.loadData()
    },
    methods: {
      loadData () {
        let userInfo = this.$store.state.userInfo
        let partyGroupId = userInfo.partyMemberModel.partyGroupId
        let data = {
//          "isFinished": "string",
          partyGroupId: partyGroupId,
          year: this.year
        }
        if (this.$store.state.isFinished > -1) {
          data.isFinished = '' + this.$store.state.isFinished
        }
        this.isLoading = true
        loginService.getStudyPlanByYear(data).then(res => {
          this.isLoading = false
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.list = res.data
        })
      },
      reloadData () {
        this.loadData()
      },
      go (item) {
        this.$router.push({path: '/studyPlan/' + item.id})
      },
      showTimePicker () {
        if (!this.datePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            columnCount: 1,
            min: new Date(nowYear - 10, 1, 1),
            max: new Date(nowYear + 1, 1, 1),
            value: new Date(me.year, 1, 1),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.year = moment(selectedTime).format('YYYY')
              this.$store.state._time = this._time = selectedTime
              this.reloadData()
            }
          })
        }
        this.datePicker.show()
        setTimeout(() => {
          this.datePicker.$updateProps({
            value: new Date(this.year, 1, 1)
          })
        }, 100)
      }
    }
  }
</script>

<style scoped>
  .time-fixed {top:auto;}
</style>
